<template>
    <div class="video_release">
        <!-- 视频发布表单 -->
        <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
            <!-- 封面上传区域 -->
            <el-form-item :label="$t('live.视频封面')" prop="images">
                <div class="cover_upload">
                    <el-upload class="avatar-uploader" :action="upload_url" :show-file-list="false"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" :before-upload="beforeImageUpload"
                        :on-success="uploadImageSuccess">
                        <img v-if="ruleForm.images" :src="ruleForm.images" class="cover">
                        <i v-else class="el-icon-plus cover-uploader-icon"></i>
                    </el-upload>
                </div>
            </el-form-item>

            <!-- 视频上传区域 -->
            <el-form-item :label="$t('live.上传视频')" prop="video">
                <div class="video_upload">
                    <!-- 视频预览 -->
                    <video v-if="ruleForm.video" :src="ruleForm.video" class="video" controls></video>

                    <!-- 视频上传组件 -->
                    <el-upload class="avatar-uploader" :action="upload_url" :show-file-list="false"
                        accept=".mp4,.avi,.mov,.wmv,.flv,.mkv,.webm" :on-success="uploadVideoSuccess"
                        :before-upload="beforeVideoUpload">
                        <div class="video-upload-trigger">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">{{ $t('live.上传视频') }}</div>
                        </div>
                    </el-upload>
                </div>
            </el-form-item>
        </el-form>

        <!-- 底部操作按钮 -->
        <div class="video_footer">
            <el-button type="primary" @click="submit">{{ $t('mall.立即发布') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">{{ $t('mall.取消') }}</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        // 封面图片验证器
        const imageValidator = (rule, value, callback) => {
            if (!value || !value.trim()) {
                callback(new Error(this.$t('live.请上传视频封面') || '请上传视频封面'));
            } else {
                callback();
            }
        };

        // 视频验证器
        const videoValidator = (rule, value, callback) => {
            if (!value || !value.trim()) {
                callback(new Error(this.$t('live.请上传视频') || '请上传视频'));
            } else {
                callback();
            }
        };

        return {
            // 上传接口地址
            upload_url: window.BASE_URL + 'common/upload',
            // 封面上传文件列表
            imageFileList: [],
            // 视频上传文件列表
            videoFileList: [],
            // 已上传的封面图片信息
            uploadedImage: null,
            // 已上传的视频信息
            uploadedVideo: null,
            // 表单数据
            ruleForm: {
                images: "", // 封面图片URL
                video: "" // 视频URL
            },
            // 表单验证规则
            rules: {
                images: [
                    { validator: imageValidator, trigger: 'blur' }
                ],
                video: [
                    { validator: videoValidator, trigger: 'blur' }
                ]
            }
        };
    },

    methods: {
        /**
         * 提交发布
         * 验证表单数据后调用发布接口
         */
        async submit() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (!valid) return false;

                try {
                    await this.$api.videoApi.publishVideo({
                        name: "",
                        image: this.ruleForm.images,
                        video: this.ruleForm.video,
                    });

                    this.$message({
                        message: this.$t('mall.发布成功'),
                        type: 'success'
                    });
                    this.$emit("ok");
                } catch (error) {
                    this.$message.error(this.$t('mall.发布失败') || '发布失败');
                }
            });
        },

        /**
         * 封面上传前验证
         * @param {File} file - 上传的文件对象
         * @returns {Boolean} 验证是否通过
         */
        beforeImageUpload(file) {
            const maxSize = 2; // 最大文件大小（MB）
            const isLt2M = file.size / 1024 / 1024 < maxSize;

            if (!isLt2M) {
                this.$message.error(this.$t('mall.最大') + `${maxSize}MB!`);
                return false;
            }
            return true;
        },

        /**
         * 封面上传成功回调
         * @param {Object} response - 服务器响应数据
         * @param {Object} file - 上传的文件对象
         * @param {Array} fileList - 文件列表
         */
        uploadImageSuccess(response, file, fileList) {
            if (response && response.data && response.data.fullurl) {
                this.uploadedImage = {
                    uid: file.uid,
                    name: file.name,
                    url: response.data.fullurl,
                    response
                };
                this.ruleForm.images = response.data.fullurl;
                // 触发表单验证
                this.$refs.ruleForm.validateField('images');
            } else {
                this.$message.error(this.$t('mall.上传失败') || '上传失败');
            }
        },

        /**
         * 视频上传前验证
         * @param {File} file - 上传的文件对象
         * @returns {Boolean} 验证是否通过
         */
        beforeVideoUpload(file) {
            const maxSize = 30; // 最大文件大小（MB）

            // 验证文件大小：最大30M
            const isLt30M = file.size / 1024 / 1024 < maxSize;
            if (!isLt30M) {
                this.$message.error(this.$t('mall.最大') + `${maxSize}MB!`);
                return false;
            }

            return true;
        },

        /**
         * 视频上传成功回调
         * @param {Object} response - 服务器响应数据
         * @param {Object} file - 上传的文件对象
         * @param {Array} fileList - 文件列表
         */
        uploadVideoSuccess(response, file, fileList) {
            if (response && response.data && response.data.fullurl) {
                this.uploadedVideo = {
                    uid: file.uid,
                    name: file.name,
                    url: response.data.fullurl,
                    response
                };
                this.ruleForm.video = response.data.fullurl;
                // 触发表单验证
                this.$refs.ruleForm.validateField('video');
            } else {
                this.$message.error(this.$t('mall.上传失败') || '上传失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.video_release {

    // 表单项样式
    &:deep(.el-form-item) {
        margin-bottom: 8px;

        .el-form-item__label {
            font-size: 14px;
            color: #333333;
        }

        .el-input__inner {
            height: 52px;
            background: #F5F5F5;
        }
    }

    // 封面和视频上传区域
    .cover_upload,
    .video_upload {
        width: 100%;
        display: flex;
        align-items: center;

        // 上传组件样式
        &:deep(.el-upload) {
            width: 150px;
            height: 150px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            // 封面上传图标
            .cover-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
            }

            // 视频上传触发区域
            .video-upload-trigger {
                width: 150px;
                height: 150px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .el-icon-upload {
                    font-size: 32px;
                }

                .el-upload__text {
                    font-size: 16px;
                }
            }

            // 封面图片样式
            .cover {
                width: 150px;
                height: 150px;
                object-fit: cover;
            }
        }

        // 上传容器大小限制
        .avatar-uploader {
            width: 150px;
            height: 150px;
        }

        // 视频预览样式
        .video {
            width: 150px;
            height: 150px;
            object-fit: fill;
            margin-right: 10px;
            border-radius: 6px;
        }
    }

    // 底部按钮区域
    .video_footer {
        padding-top: 20px;
        display: flex;
        justify-content: center;

        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}
</style>